<template>
  <div class="banner">
    <el-carousel height="540px">
      <el-carousel-item v-for="item in list" :key="item">
        <div
          class="banner-item"
          :style="{ backgroundImage: `url(${item.img})` }"
        >
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <Title class="title" title="COLOURMIX，让您的信息遍布全球" />
  <div class="logo-wrapper">
    <img v-for="item in imgList" :key="item" :src="item" alt="" />
  </div>
  <div class="business-footer">
    <p class="first">COLOURMIX助您实现商业目标</p>
    <p class="second">
      COLOURMIX海外全平台广告代理支持，14年专业广告投放支持助您快速扩展海外目标市场，助您轻松获得全球客户
    </p>
  </div>
  <div class="target-wrapper">
    <div class="target-content">
      <Title title="助你获得更多流量，实现商业目标"></Title>
      <el-carousel height="450px">
        <el-carousel-item v-for="item in targetList" :key="item">
          <div class="target-item">
            <img :src="item.img" alt="" />
            <div class="item-block">
              <div class="item-title">{{ item.title }}</div>
              <p>{{ item.desc }}</p>
              <ul class="item-child">
                <li>
                  <h6>
                    {{ item.showTime }}
                    <small>次</small>
                  </h6>
                  <p>展示次数</p>
                </li>
                <li>
                  <h6>
                    {{ item.buyTime }}
                    <small></small>
                  </h6>
                  <p>交易量</p>
                </li>
                <li>
                  <h6>
                    {{ item.refund }}
                    <small>倍</small>
                  </h6>
                  <p>回报率</p>
                </li>
              </ul>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div class="our-strengths">
    <div class="container">
      <Title title="我们的服务"></Title>
      <div class="nav-content">
        <ul>
          <li v-for="item in strengthList" :key="item.title">
            <img :src="item.img" alt="" />
            <h4>{{ item.title }}</h4>
            <p>
              {{ item.desc }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="our-advantage">
    <div class="container">
      <Title title="我们的优势"></Title>
      <div class="nav-content">
        <ul>
          <li v-for="item in advantageList" :key="item.title">
            <img :src="item.img" alt="" />
            <h4>{{ item.title }}</h4>
            <p>
              {{ item.desc }}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="advanta-info">
      <img
        width="420"
        data-v-396304d0=""
        data-src="https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/advantage.png"
        src="https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/advantage.png"
        lazy="loaded"
      />
      <div class="advanta-items" data-v-396304d0="">
        <div class="advanta-list" data-v-396304d0="">
          <div class="advanta-line" data-v-396304d0=""></div>
          <div class="advanta-container" data-v-396304d0="">
            <div class="advanta-title" data-v-396304d0="">
              独立站建设配套环节完善
            </div>
            <div class="advanta-text" data-v-396304d0="">
              整合了以Shoptop为代表的建站工具、支付、第三方物流和CRM等渠道，大大降低了出海企业建设和运营独立站的难度
            </div>
          </div>
        </div>
        <div class="advanta-list" data-v-396304d0="">
          <div class="advanta-line" data-v-396304d0=""></div>
          <div class="advanta-container" data-v-396304d0="">
            <div class="advanta-title" data-v-396304d0="">
              海外主流广告媒体全覆盖
            </div>
            <div class="advanta-text" data-v-396304d0="">
              以Google、Facebook为代表的流量媒体高度重视B2C出海市场，从产品、服务和支持端对于出海电商给予全面的支持
            </div>
          </div>
        </div>
        <div class="advanta-list" data-v-396304d0="">
          <div class="advanta-line" data-v-396304d0=""></div>
          <div class="advanta-container" data-v-396304d0="">
            <div class="advanta-title" data-v-396304d0="">
              品牌出海成功经验可复制
            </div>
            <div class="advanta-text" data-v-396304d0="">
              经过数年发展，COLOURMIX已经掌握一套可复制的独立站运营经验，可以快速帮助出海电商转型进行独立站运营
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="quali-cercate" data-v-396304d0="">
    <div class="container" data-v-396304d0="">
      <div class="title" data-v-396304d0="">
        <div class="title-wrapper" data-v-396304d0="">
          <h2 data-v-396304d0="">资质证书</h2>
        </div>
      </div>
      <div class="cate-block" data-v-396304d0="">
        <div class="cate-left" data-v-396304d0=""></div>
        <div class="cate-right" data-v-396304d0="">
          <ul data-v-396304d0="">
            <li data-v-396304d0="">
              <div data-v-396304d0="">
                <div data-v-396304d0="" class="cate-right-img">
                  <div data-v-396304d0="" class="el-image" style="width: 70%">
                    <img
                      src="https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15827793959484085.png"
                      class="el-image__inner el-image__preview"
                    /><!---->
                  </div>
                </div>
                <div data-v-396304d0="" class="cate-right-text">
                  <p data-v-396304d0="">Facebook</p>
                  <h6 data-v-396304d0="">facebook核心代理</h6>
                </div>
              </div>
            </li>
            <li data-v-396304d0="">
              <div data-v-396304d0="">
                <div data-v-396304d0="" class="cate-right-text">
                  <p data-v-396304d0="">Google</p>
                  <h6 data-v-396304d0="">Google一级代理</h6>
                </div>
                <div data-v-396304d0="" class="cate-right-img">
                  <div data-v-396304d0="" class="el-image" style="width: 70%">
                    <img
                      src="https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15827792583203458.png"
                      class="el-image__inner el-image__preview"
                    /><!---->
                  </div>
                </div>
              </div>
            </li>
            <li data-v-396304d0="">
              <div data-v-396304d0="">
                <div data-v-396304d0="" class="cate-right-img">
                  <div data-v-396304d0="" class="el-image" style="width: 70%">
                    <img
                      src="https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15827792837137954.png"
                      class="el-image__inner el-image__preview"
                    /><!---->
                  </div>
                </div>
                <div data-v-396304d0="" class="cate-right-text">
                  <p data-v-396304d0="">Google</p>
                  <h6 data-v-396304d0="">Google合作伙伴徽章</h6>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const list = [
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912609494725367.jpg",
    title: "一站式互联网营销服务平台",
    desc: "帮助您轻松获得全球客户，快速拓展海外目标市场",
  },
  {
    title: "一体化全网全媒体数字化",
    desc: "提供“大数据分析+广告投放+账户管理+整合营销策划”的综合推广服务",
    img: "https://img2.baidu.com/it/u=3494023927,770172315&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734195600&t=6561234e9eecb865e6de3cf512ef1256",
  },
];
const imgList = [
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/google.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/facebook.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/bing.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/tiktok.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/yandex.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/yahoo.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/twitter.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/pinterest.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/linkedin.png",
  "https://assets-lovead-com.oss-cn-shanghai.aliyuncs.com/website/logo/criteo.png",
];
const targetList = [
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15828046492201001.jpeg",
    title: "意大利企业全球拓展",
    desc: "最近新拓展了意大利企业客户，通过投放google和bing广告实现了超高ROI和自主品牌的树立及业务发展",
    showTime: 6000000,
    buyTime: 676,
    refund: 4,
  },
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15828023327211703.jpeg",
    title: "深圳医疗清洁用品公司",
    desc: "深圳医疗清洁用品公司成立于深圳，致力于开发和研究医疗用品各种清洁用品和清洁试剂，通过投放google和bing广告实现了超高ROI和自主品牌的树立",
    showTime: 300000,
    buyTime: 15000,
    refund: 6,
  },
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15828046292094174.jpeg",
    title: "泉州服装贸易公司",
    desc: "泉州服装贸易公司深耕服装市场多年，随着市场趋于饱和想由国内转向海外，苦于海外推广的壁垒我们为其选择了谷歌搜索进行推广，投入广告后的两个季度里面销量都超出其预期",
    showTime: 270000,
    buyTime: 1000,
    refund: 4,
  },
];
const strengthList = [
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912645107896575.png",
    title: "大数据分析",
    desc: "基于海量用户信息，以各平台专业数据分析工具为依托，对您的数据规律进行可视化分析。",
  },
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912645184395227.png",
    title: "广告投放",
    desc: "14年多品类投放经验，根据各平台各行业中的不同用户群进行细分，将您的广告信息在对的时间、对的平台投放至对的人",
  },
  {
    img: "https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/1591264525979988.png",
    title: "账户管理",
    desc: "一站式账户管理服务，帮助您在海外广告全平台免费快速开户，提供账号管理、后台操作指导等服务。",
  },
  {
    img: "	https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912645328041323.png",
    title: "整合营销策略",
    desc: "根据营销需求、目标受众，投放整合营销企划，为您量身定制最优营销方案，达成营销目标。",
  },
];
const advantageList = [
  {
    img: "https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2023/10/24/16981333013416180.png",
    title: "渠道优势",
    desc: "在搜索平台和社交媒体获得了众多全球巨头们的官方资格合作伙伴认证，用户覆盖率达全球80%。",
  },
  {
    img: "https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2023/10/24/16981333633124534.png",
    title: "定位准确",
    desc: "强大的数据网络和经验丰富的账户投放经理，将您的广告精准投放至目标客户群。",
  },
  {
    img: "https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2023/10/24/16981335142812737.png",
    title: "全程跟踪服务",
    desc: "从制定推广流程、开通账户到投放管理再到效果评估最后进行持续优化，您将享受到一站式服务。",
  },
  {
    img: "https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2023/10/24/16981335845351045.png",
    title: "高于市场的转化率",
    desc: "基于实时数据及COLOURMIX的经验储备，制定推广计划，并根据数据的反馈进行调整直至优势最大化。",
  },
];
</script>
<style lang="less" scoped>
.banner {
  height: 540px;
  width: 100%;
  .el-carousel__item .banner-item {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      color: #fff;
      font-size: 42px;
      font-weight: 600;
      letter-spacing: 3px;
      line-height: 70px;
      margin-bottom: 4px;
    }
    .desc {
      color: #fff;
      font-size: 18px;
      line-height: 27px;
      margin: 8px 0 60px;
      opacity: 0.9;
    }
  }
}
.title {
  margin: 20px 0;
}
.logo-wrapper {
  background-image: url(https://lovead-sit.oss-cn-shanghai.aliyuncs.com/images/2020/03/04/15832911112427112.png);
  background-repeat: round;
  height: 270px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 80px;
  width: 500px;
  img {
    width: 40px;
    height: 40px;
    &:first-child {
      animation-name: first-396304d0;
      left: -100px;
      position: absolute;
      top: 60px;
    }
    &:nth-child(2) {
      left: -20px;
      position: absolute;
      top: 120px;
    }
    &:nth-child(3) {
      left: 60px;
      position: absolute;
      top: 40px;
    }
    &:nth-child(4) {
      left: 130px;
      position: absolute;
      top: 150px;
    }
    &:nth-child(5) {
      left: 200px;
      position: absolute;
      top: 15px;
    }
    &:nth-child(6) {
      position: absolute;
      right: 190px;
      top: 80px;
    }
    &:nth-child(7) {
      position: absolute;
      right: 60px;
      top: 10px;
    }
    &:nth-child(8) {
      position: absolute;
      right: 120px;
      top: 160px;
    }
    &:nth-child(9) {
      position: absolute;
      right: 0;
      top: 120px;
    }
    &:nth-child(10) {
      position: absolute;
      right: -70px;
      top: 40px;
    }
  }
}
.business-footer {
  line-height: 30px;
  padding: 120px 0 60px;
  text-align: center;
  .first {
    color: #393939;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .second {
    color: #2b2b2b;
    font-size: 16px;
    margin: 20px 0;
  }
}
.target-wrapper {
  background-color: #f7f9fb;
  height: 740px;
  position: relative;
  padding-top: 40px;
  .target-content {
    width: 1080px;
    margin: 0 auto;
    .el-carousel__item .target-item {
      height: 450px;
      width: 100%;
      img {
        float: left;
        height: 100%;
        margin-right: 40px;
        width: 450px;
      }
      .item-block {
        height: 100%;
        padding-top: 70px;
        text-align: left;
        .item-title {
          color: #1c3366;
          font-size: 28px;
          font-weight: 400;
          margin-bottom: 20px;
        }
        .item-child {
          display: flex;
          justify-content: space-between;
          list-style: none;
          margin: 40px 0;
          padding: 0;
          width: 450px;
          li {
            color: #fff;
            line-height: 30px;
            width: 150px;
            h6 {
              color: #3e76ff;
              font-size: 22px;
              margin-bottom: 10px;
              margin-top: 0;
            }
            p {
              font-size: 14px;
              opacity: 1;
              color: #1f2937;
              font-size: 16px;
              letter-spacing: 0;
              line-height: 28px;
              opacity: 0.8;
              width: 98%;
            }
          }
        }
      }
    }
  }
}
.our-strengths,
.our-advantage {
  min-height: 550px;
  overflow: hidden;
  position: relative;
  .container {
    padding-top: 40px;
    position: relative;
    .nav-content {
      margin: auto;
      position: relative;
      top: 40px;
      width: 1080px;
      ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        margin-left: 15px;
        padding: 0;
        li {
          width: 190px;
          text-align: center;
          img {
            margin-left: 20px;
            width: 150px;
          }
          h4 {
            color: #181818;
            font-size: 18px;
            font-weight: 400;
            margin: 0 0 20px;
            text-align: center;
          }
          p {
            color: #999;
            font-size: 14px;
            letter-spacing: 1px;
            text-align: left;
          }
        }
      }
    }
  }
}
.our-advantage {
  .advanta-info {
    width: 1080px;
    display: flex;
    justify-content: space-between;
    margin: 60px auto 0;

    padding-bottom: 100px;
    .advanta-items {
      padding-top: 20px;
      text-align: left;
      width: 500px;
      .advanta-list {
        display: flex;
        letter-spacing: 1px;
        margin-bottom: 60px;
        .advanta-line {
          background-image: linear-gradient(90deg, #4bf5ff, #2f6aff);
          border-radius: 100px;
          flex-shrink: 0;
          height: 14px;
          margin-right: 15px;
          margin-top: 8px;
          width: 14px;
        }
        .advanta-container {
          .advanta-title {
            color: #333;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
          }
          .advanta-text {
            color: #999;
            font-size: 16px;
            line-height: 20px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
.quali-cercate {
  height: 650px;
  overflow: hidden;
  position: relative;
  .container {
    background-image: url(https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912559471756021.jpg);
    background-size: 100%;
    height: 480px;
    padding-top: 40px;
    position: relative;
    .title {
      text-align: center;
      .title-wrapper {
        h2 {
          color: #fff;
          font-size: 30px;
          line-height: 46px;
          &:after {
            background-image: linear-gradient(90deg, #4bf5ff, #2f6aff);
            border-radius: 2px;
            content: "";
            display: block;
            height: 4px;
            margin: 16px auto 12px;
            width: 35px;
          }
        }
      }
    }
    .cate-block {
      display: flex;
      height: 430px;
      left: 50%;
      margin-left: -530px;
      position: absolute;
      top: 150px;
      width: 1080px;
      .cate-left {
        background-image: url(https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/06/04/15912680130847362.jpg);
        background-size: cover;
        height: 430px;
        margin-top: 16px;
        width: 35%;
      }
      .cate-right {
        width: 68%;
        ul {
          list-style: none;
          padding: 0;
          li {
            background-color: #fff;
            float: left;
            height: 400px;
            text-align: center;
            width: 33%;
            .cate-right-img {
              background-color: #fff;
              height: 215px;
              overflow: hidden;
              width: 100%;
            }
            .cate-right-text {
              background-color: #eef4fa;
              height: 215px;
              overflow: hidden;
              text-align: center;
              width: 100%;
              p {
                font-size: 22px;
                margin-top: 65px;
              }

              h6 {
                color: #555;
                font-size: 20px;
                font-weight: 400;
                margin-top: 15px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
